<template>
    <div style="margin-top: 2%; margin-left: 5%; margin-right: 5%">
        <h2>个人中心</h2>
        <br/>
        <div v-if="isMO">
            <Card>
                    <span slot="title">个人信息
                        <Divider type="vertical"/>
                        <a href="/do/changeU">修改</a>
                    </span>
                <div>
                    用户名：
                    <strong>{{user.name}}</strong>
                    <br/>
                    邮箱：
                    <strong>{{user.email}}</strong>
                    <br/>
                    权限：
                    <strong>{{user.type}}</strong>
                    <div v-if="user.type != '访客'">
                        班级：<strong>{{user.clazz}}</strong>
                        <br/>
                        届数：<strong>{{user.sess}}</strong>
                    </div>
                </div>
            </Card>
            <br/>
            <Card>
                <span slot="title">统计</span>
                <div>
                    <Row :gutter="20">
                        <Col :span="12">
                            总阅读量：
                        </Col>
                        <Col :span="12">
                            总点赞数：
                        </Col>
                    </Row>
                    <Row :gutter="20">
                        <Col :span="12">
                            <h1>{{view}}</h1>
                        </Col>
                        <Col :span="12">
                            <h1>{{like}}</h1>
                        </Col>
                    </Row>
                </div>
            </Card>
            <br/>
            <Row :gutter="20">
                <Col :span="12">
                    <Card>
                        <span slot="title">文章数</span>
                        <h1>{{arts.length}}</h1>
                    </Card>
                </Col>
                <Col :span="12">
                    <Card>
                        <span slot="title">评论数</span>
                        <h1>{{co}}</h1>
                    </Card>
                </Col>
            </Row>
            <br/>
            敬请期待......
        </div>
        <div v-if="!isMO">
            <Row :gutter="20">
                <Col :span="12">
                    <Card>
                    <span slot="title">个人信息
                        <Divider type="vertical"/>
                        <a href="/do/changeU">修改</a>
                    </span>
                        <div>
                            用户名：
                            <strong>{{user.name}}</strong>
                            <br/>
                            邮箱：
                            <strong>{{user.email}}</strong>
                            <br/>
                            权限：
                            <strong>{{user.type}}</strong>
                            <div v-if="user.type != '访客'">
                                班级：<strong>{{user.clazz}}</strong>
                                <br/>
                                届数：<strong>{{user.sess}}</strong>
                            </div>
                        </div>
                    </Card>
                </Col>
                <Col :span="12">
                    <Card>
                        <span slot="title">统计</span>
                        <div>
                            <Row :gutter="20">
                                <Col :span="12">
                                    总阅读量：
                                </Col>
                                <Col :span="12">
                                    总点赞数：
                                </Col>
                            </Row>
                            <Row :gutter="20">
                                <Col :span="12">
                                    <h1>{{view}}</h1>
                                </Col>
                                <Col :span="12">
                                    <h1>{{like}}</h1>
                                </Col>
                            </Row>
                        </div>
                    </Card>
                </Col>
            </Row>
            <br/>
            <Row :gutter="20">
                <Col :span="12">
                    <Row :gutter="20">
                        <Col :span="12">
                            <Card>
                                <span slot="title">文章数</span>
                                <h1>{{arts.length}}</h1>
                            </Card>
                        </Col>
                        <Col :span="12">
                            <Card>
                                <span slot="title">评论数</span>
                                <h1>{{co}}</h1>
                            </Card>
                        </Col>
                    </Row>
                </Col>
                <Col :span="12">
                    敬请期待......
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Info",
        created() {
            const t = this;
            axios.get('/getUser').then(function (resp) {
                t.user = resp.data;
                if (t.user.type == -1)
                    t.user.type = '管理员';
                if (t.user.type == 0)
                    t.user.type = '学生';
                if (t.user.type == 1)
                    t.user.type = '访客';
                t.getArts();
                t.getCoC();
            })
        },
        data() {
            return {
                isMO: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
                user: '',
                arts: '',
                view: 0,
                like: 0,
                co: 0,
            }
        },
        methods: {
            getArts() {
                const t = this;
                axios.get('/getArticleByAuthor/' + t.user.id).then(function (resp) {
                    t.arts = resp.data;
                    for (let i = 0; i < t.arts.length; i++) {
                        if (t.arts[i].pass) {
                            t.view = t.view + t.arts[i].view;
                            t.like = t.like + t.arts[i].like;
                        }
                    }
                })
            },
            getCoC() {
                const t = this;
                axios.get('/countByUID/' + t.user.id).then(function (resp) {
                    t.co = resp.data;
                })
            }
        }
    }
</script>

<style scoped>

</style>